<template>
  <div class="home">
    <!-- 插槽：
            默认插槽
                定义：<slot>{{title}}</slot>
                使用:
                   <xxx>内容</xxx>
            具名插槽
                定义：
                   xxx.vue
                      <slot name="abc" />
                使用：
                   <xxx>
                      <template #abc>
                        内容
                        </template>
                    </xxx>  -->
    <!--    频道列表
            1：定义api
            2:导入api
            3:进入页面就调用api
            4:存储数据并渲染  -->
    <van-nav-bar>
      <template #left>
        <img
          class="logo"
          src="http://xpzll.gitee.io/hmtt-76/img/logo.4653c8be.png"
          alt=""
        />
      </template>
      <template #right>
        <van-button
          @click="$router.push('/search')"
          icon="search"
          color="#5aabfb"
          size="small"
          round
          >搜索</van-button
        >
      </template>
    </van-nav-bar>
    <div class="tabs">
      <van-tabs v-model="active">
        <van-tab v-for="item in list" :key="item.id" :title="item.name">
          <!--  父传子
               传  <子组件标签 :属性名="值" />
               收
                  props:{
                       属性名:{
                        type:类型
                        required:是否必传,
                        default:默认值，
                                 基本数据:直接写
                                 复杂数据类型：()=>{return 复杂数据}
                        validator:(value)=>{ return boolean  }
                       }}   -->
          <ArticleList :id="item.id"></ArticleList>
        </van-tab>
      </van-tabs>
      <van-icon class="icon" name="wap-nav" @click="iconClick" />
    </div>
    <!-- 频道管理 -->
    <!-- <ChannelEdit
      ref="edit"
      :currList="list"
      :active="active"
      @setActive="setActive"
      @add="add"
      @del="del"
    ></ChannelEdit> -->
    <ChannelEdit
      ref="edit"
      :currList="list"
      v-model="active"
      @add="add"
      @del="del"
    ></ChannelEdit>
  </div>
</template>

<script>
import { userChannels, userChannelsPut } from '@/api/home'
import ArticleList from './components/articleList.vue'
import ChannelEdit from './components/channelEdit.vue'
export default {
  name: 'Home',
  components: {
    ArticleList,
    ChannelEdit
  },
  data () {
    return {
      list: JSON.parse(localStorage.getItem('list')) || [],
      active: 0
    }
  },
  created () {
    // 如果登录了，就一定要调用getData
    if (this.$store.state.tokenObj.token) {
      // 登录的处理
      this.getData()
    } else {
      // 没登录的处理
      if (this.list.length === 0) {
        this.getData()
      }
    }
  },
  methods: {
    async getData () {
      const res = await userChannels()
      this.list = res.data.channels
      this.save()
      console.log(res)
    },
    // icon频道显示的点击
    iconClick () {
      // 打开频道管理弹框
      this.$refs.edit.isShow = true
    },
    // 修改tabs选中项的下标
    setActive (index) {
      this.active = index
    },
    // 我的频道数据新增
    add (val) {
      this.list.push(val)
      this.save()
    },
    // 我的频道的删除
    del (id) {
      // 下标   数组.splice(下标,1)
      // id  我的频道= 数组.filter(item=>item.id!==id)
      this.list = this.list.filter(item => item.id !== id)
      this.save()
    },
    // list修改了存储到浏览器
    async save () {
      // 如果登录(token)就要调用接口
      // list:[{id,name}]===>[{id,seq}]
      // map: 循环，生成一个新的数组  返回值=数组.map(item=>{return {....}})
      if (this.$store.state.tokenObj.token) {
        await userChannelsPut({
          channels: this.list.map((item, index) => {
            return {
              id: item.id,
              seq: index
            }
          })
        })
      }
      localStorage.setItem('list', JSON.stringify(this.list))
    }
  }
}
</script>

<style lang="less" scoped>
.logo {
  height: 100%;
}
.tabs {
  padding-right: 36px;
  position: relative;
  .icon {
    position: absolute;
    top: 7px;
    right: 7px;
    font-size: 30px;
  }
}
</style>
